<template>
  <div class="sex-box">
    <div class="title">
      <p>男女比例</p>
      <p class="bg" />
    </div>

    <div class="sex-data">
      <div class="man">
        <span class="header">男士</span>
        <img src="@/assets/images/screen/man.png" />
      </div>
      <div class="woman">
        <span class="header">女士</span>
        <img src="@/assets/images/screen/woman.png" />
      </div>
    </div>
    <div class="rate">
      <p>男士58%</p>
      <p>女士42%</p>
    </div>
    <div ref="charts" class="echarts-box" />
  </div>
</template>

<script setup lang="ts" >
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';

let charts = ref();

onMounted(() => {
  let mycharts = echarts.init(charts.value);
  mycharts.setOption({
    xAxis: {
      show: false,
      min: 0,
      max: 100,
    },
    yAxis: {
      show: false,
      type: 'category',
    },
    series: [
      {
        type: 'bar',
        data: [58],
        barWidth: 25,
        z: 100,
        itemStyle: {
          color: '#007AFE',
          borderRadius: 20,
        },
      },
      {
        type: 'bar',
        data: [100],
        barWidth: 25,
        barGap: '-100%',
        itemStyle: {
          color: '#FF4B7A',
          borderRadius: 20,
        },
      },
    ],
    grid: {
      left: 0,
      top: 0,
      right: 0,
      bottom: 0,
    },
  });
});
</script>

<style lang="less" scoped>
.sex-box {
  background: url('@/assets/images/screen/dataScreen-main-lb.png') no-repeat;
  background-size: 100% 100%;
  .title {
    color: white;
    font-size: 20px;
    .bg {
      width: 68px;
      height: 7px;
      background: url('@/assets/images/screen/dataScreen-title.png') no-repeat;
      background-size: 100% 100%;
      margin-top: 10px;
    }
  }
  .sex-data {
    display: flex;
    justify-content: space-around;
    padding: 30px 40px 0 40px;
    .header {
      line-height: 20px;
      color: #fff;
    }
    .man {
      height: 115px;
      width: 111px;
      background-color: skyblue;
      background: url('@/assets/images/screen/man-bg.png') no-repeat;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 10px;
    }
    .woman {
      height: 115px;
      width: 111px;
      background: url('@/assets/images/screen/woman-bg.png') no-repeat;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 10px;
    }
  }
  .rate {
    display: flex;
    justify-content: space-between;
    padding: 20px 70px 0 70px;
    color: white;
  }
  .echarts-box {
    margin-top: -25px;
    padding: 0 70px;
    height: 100px;
  }
}
</style>
